<template>
  <div class="box">
    <div class="title">
      <p>使用次数</p>
    </div>
    <div class="charts">
      <el-table
        class="custom-table"
        :data="tableData"
        style="width: 90%"
        border
      >
        <el-table-column
          :resizable="false"
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column
          :resizable="false"
          prop="robotName"
          label="设备名称"
          sortable
        />
        <el-table-column
          :resizable="false"
          prop="faultRemark"
          label="故障描述"
        />
        <el-table-column
          :resizable="false"
          prop="findTime"
          label="发现时间"
          :show-overflow-tooltip="true"
        >
          <template #default="{ row }">
            <!-- <el-tooltip :content="formatTime(row.findTime)" placement="top"> -->
            <!-- <div class="no-wrap"> -->
            {{ formatTime(row.findTime) }}
            <!-- </div> -->
            <!-- </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column
          :resizable="false"
          prop="handleStatus"
          label="处理状态"
        >
          <template #default="{ row }">
            {{ handleStatusFormatter(row.handleStatus) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { RobotApi } from "@/api/map/faultlist";
import dayjs from "dayjs";
const tableData = ref([]);
const provinceCity = ref(localStorage.getItem("provinceCity"));
onMounted(async () => {
  const res = await RobotApi.getRobotFaultList({
    province: provinceCity.value,
  });
  tableData.value = res;
  //console.log(res, "getRobotFaultList", provinceCity.value);
});
// 时间格式化函数
const formatTime = (timestamp) => {
  if (!timestamp) return ""; // 如果时间戳为空，返回空字符串
  return dayjs(timestamp).format("YYYY-MM-DD HH:mm:ss"); // 自定义格式
};
const handleStatusFormatter = (status: any) => {
  const STATUSES = [
    { handleStatus: 0, name: "未处理" },
    { handleStatus: 1, name: "处理中" },
    { handleStatus: 2, name: "已处理" },
  ];

  const matched = STATUSES.find((item) => item.handleStatus === status);
  return matched ? matched.name : "";
};
</script>

<style scoped lang="scss">
.box {
  position: absolute;
  margin-top: 45px;
  margin-left: 12px;
  .title {
    position: absolute;
    top: -2.5%;
    left: -2%;
    letter-spacing: 8px; /* 设置字间距 */
    writing-mode: vertical-rl;
    p {
      color: white;
      font-size: 14px;
    }
  }
}
/* 设置表格宽度和 box-sizing */
::v-deep .el-table {
  background-color: transparent !important;
  border: 1px solid #fff !important;
  width: 100%; /* 或者设置一个具体的宽度 */
  height: 167px;
  margin-left: 26px;
  margin-top: -5%;
  table-layout: fixed; /* 确保表格宽度固定，避免扩展 */
  box-sizing: border-box; /* 包括边框和内边距在内计算宽度 */
}
::v-deep .el-table tr {
  color: #fff;
  height: 26px;
  white-space: nowrap;
  background-color: transparent !important;
}

::v-deep .custom-table .el-table__header th,
::v-deep .custom-table .el-table__body td {
  text-align: center;
  border: 1px solid #fff;
  background-color: transparent !important;
}
</style>
